<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 标准流
    默认情况下，元素都是按照normal flow (标准流、常规流、正常流、文档流[document flow]) 进行排布
    口 从左到右、从上到下按顺序摆放好
    口 默认情况下，互相之间不存在层叠现象


    margin-padding 位置调整
    在标准流中，可以使用margin、padding对元素进行定位口其中margin还可以设置负数
    比较明显的缺点是
    口设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
    口 不便于实现元素层叠的效果
    如果我们希望一个元素可以跳出标准流,单独的对某个元素进行定位呢?
    口 我们可以通过position属性来进行设置
    */
  </style>
  <body>
    <span>span1</span>
    <img src="images/cube.jpg” alt=""><span style="display: inline-block"
      >span2</span
    >
    <div>div</div>
    <p>p</p>
    <span style="display: inline-block">span</span><strong>strong</strong>
    <h1>h1</h1>
    <span>span3</span>
    <span style="display: inline-block">span4</span><span>span5</span>
  </body>
</html>
